۱. < ! DOCTYPE html >
در ابتدای تمامی‌اسناد HTML به این کد نیاز دارید. دلیل اینکار اعلام HTML بودن کدها به مرورگر است. هرچند این کد در واقع یک تگ محسوب نمی‌شود اما فراگیری آن ضروری است.
۲. < html >
این تگ هم HTML بودن کدها را به مرورگر اعلام کرده و دقیقا بعد از DOCTYPE قرار می‌گیرد. در پایان تمامی‌کدها و اسکریپت‌ها باید با نگارش < / html >اتمام این تگ را به مرورگر اعلام کنید.
۳. < head >
این تگ هدر یا سربرگ فایل شما را شروع می‌کند. مواردی که در این تگ قید می‌شوند روی صفحه، نمایش داده نشده و حاوی متاداده‌ها برای موتورهای جستجو و اطلاعات خاصی برای مرورگر هستند.
برای صفحات ساده تگ
< head >تنها شامل عنوان است اما می‌توانید موارد دیگری را هم در آن قرار دهید که در ادامه به آن می‌پردازیم.
۴. < title >
این تگ عنوان صفحه شما را تنظیم می‌کند و تنها کاری که باید بکنید قرار دادن عنوان در تگ و بستن آن است؛ برای مثال:
< head >
< title >My Website
< / title >
< / head >
به محض باز شدن این صفحه در مرورگر عبارت My Website روی تب نشان داده می‌شود.
۵. < meta >
متادیتا هم مثل تگ عنوان در ناحیه هدر صفحه قرار گرفته و کاربرد اصلی آن ارائه اطلاعاتی در مورد صفحه به موتورهای جستجو است. متادیتا شامل فیلدهای متنوعی است اما رایج ترین آنها عبارتند از:
description: شرح مختصر صفحه
keywords: منتخبی از کلمات کلیدی مربوط به صفحه
author: مشخصات نویسنده صفحه
Viewport: تگی که نمایش صحیح صفحه در دستگاه‌های مختلف را تضمین می‌کند.
مثالی از بکارگیری این فیلدها در یک صفحه:
< meta name="description" content="A basic HTML tutorial" >
< meta name="keywords" content="HTML,code,tags" >
< meta name="author" content="MakeUseOf" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
برای اطمینان از نمایش درست صفحه در موبایل و کامپیوترها تگ viewport همیشه باید حاوی “width=device-width, initial-scale=1.0” باشد.
۶. < body >
بعد از بستن هدر نوبت به بدنه کدها می‌رسد. این بخش را با نوشتن تگ
< body >کلید زده و با تگ
< / body >در انتهای کدها و قبل از
< / html >به پایان می‌رسانید. تمامی‌محتوای صفحه وب بین این تگ‌ها قرار می‌گیرند:
< body >
تمام آنچه که روی صفحه نمایش داده می‌شوند
< / body >
۷. < h1 >
این تگ یک هدر سطح اول را در صفحه تعریف می‌کند که معمولا عنوان است. در حالت ایده ال تنها یک مورد از آن در صفحه وجود دارد.
تگ
< h2 >هدرهای سطح دوم مثل تیترهای هر بخش،
< h3 >هدرهای سطح سوم و ... در نهایت
< h6 >هدرهای سطح ششم را تعریف می‌کنند. برای مثال اسامی‌تگ‌ها در این مقاله هدرهای سطح ۲ هستند.
< h1 >Big and Important Header
< / h1 >
< h2 >Slightly Less Big Header
< / h2 >
< h3 >Sub-Header
< / h3 >
نتیجه این کد در تصویر زیر قابل مشاهده است. همانطور که می‌بینید با افزایش هر سطح متن‌ها کوچکتر می‌شوند.
۸. < p >
این تگ یک پاراگراف جدید ایجاد کرده و معمولا دو خط بین آنها فاصله می‌اندازد.
برای مثال فاصله بین خط قبلی و این خط را در نظر بگیرید؛ این همان کاری است که تگ < p >انجام می‌دهد.
< p >Your first paragraph.
< / p >
< p >Your second paragraph.
< / p >
نتیجه:
Your first paragraph.
Your second paragraph.
امکان استفاده از استایل‌های CSS هم در تگ پاراگراف وجود دارد. برای مثال این کد اندازه متن را تا ۲۰ درصد بزرگتر می‌کند.
< p style="font-size: 120%;" >20% larger text < / p >
نتیجه:
20% larger text
۹. < br >
این تگ تنها یک خط فاصله ایجاد می‌کند.
< p >The first line. < br >The second line (close to the first one). < / p >
نتیجه:
The first line.
The second line (close to the first one).
این مورد هم مثل تگ < hr >خطی افقی را در صفحه ایجاد کرده و به جداسازی بهتر بخش‌ها کمک می‌کند.
۱۰. < strong >
این تگ بخش‌های مهم متن را برجسته کرده و به صورت بولد در می‌آورد. البته با استفاده از CSS می‌توان متن را به شکل کاملا متفاوتی به نماش درآورد.
< strong >Very important things you want to say. < / strong >
نتیجه:
Very important things you want to say.
اگر با تگ < b >و بولد کردن متن با آن آشنا باشید، هنوز امکان استفاده از آن وجود دارد اما ممکن است در نسخه‌های بعدی HTML پشتیبانی از آن پایان یابد.
۱۱. < em >
< em >و < i>مثل < b >و < strong >ارتباط تنگاتنگی با هم دارند و تگ < em >نیز با پررنگ کردن بخشی از متن آن را از قسمت‌های دیگر متمایز می‌سازد. اینجا هم می‌توان به لطف CSS متن را به شکل کاملا متفاوتی به نمایش دراورد.
< em >An emphasized line. < / em >
نتیجه:
An emphasized line.
تگ < i >هم کاربرد مشابهی دارد اما بعید نیست با نسخه‌های آتی HTML سازگاری نداشته باشد.
۱۲. < a >
< a >یا لنگر امکان ایجاد لینک را به شما می‌دهد. یک لینک ساده چنین ظاهری دارد:
< a href="// www.mohammadmoeine.ir />Go to drhack < / a >
نتیجه:
go to drhack
صفت href مقصد لینک را مشخص می‌کند که در اغلب موارد صفحه‌‌‌ای دیگر است؛ با این حال مقصد می‌تواند یک فایل، تصویر یا PDF هم باشد.
دیگر صفت‌های مفید شامل target و title است که مورد اول منحصرا برای بازکردن لینک در صفحه جدید کاربرد دارد:
< a href =" target="_blank">Go to drhack in a new tab ; < / a>
نتیجه:
Go to sematec in a new tab
صفت title هم هنگام بردن نشانگر موس روی لینک، یک متن را نمایش می‌دهد. برای مثال در کد زیر این متن "سایت سماتک" است که با نگه داشتن نشانگر روی لینک به نمایش درمی‌آید:
< a href="// www.mohammadmoeine.ir/" title="سایت دکترهک">GO to drhack < / a >
نتیجه:
GO to drhack
۱۳. < img >
اگر قصد گذاشتن تصویر در صفحه را دارید، باید از تگ img استفاده کنید. این تگ معمولا همراه با صفت src برای مشخص کردن تصویر بکار می‌رود. برای مثال:
< img src="wp-content/uploads/2019/04/sunlit-birds.jpg" >
دیگر صفت‌های در دسترس شامل height، width و alt است که در صورت بکارگیری آنها کد بدین شکل در می‌آید:
< img src=" wp-content/uploads/2019/04/sunlit-birds.jpg" alt= "the name of your image" >
صفات height و width به ترتیب برای تنظیم ارتفاع و عرض تصویر کاربرد دارند. برای اجتناب از به هم خوردن تصویر بهتر است تنها یکی از آنها را تنظیم کرده و مورد دیگر را به عهده سیستم بگذارید. در صورت تنظیم هردو ممکن است تصویر کشیده شود.
تگ alt به مرورگر می‌گوید در صورت عدم نمایش تصویر به هر دلیل متنی را به جای آن نمایش دهد. استفاده از این متن ایده خوبی است چرا که اگر یک نفر به خاطر سرعت پایین اینترنت یا استفاده از مرورگرهای قدیمی‌قادر به مشاهده تصویر نباشد، حداقل متن مرتبط با آن را خواهد دید.
۱۴. < ol >
این تگ برای ایجاد لیست‌های منظم و شماره دار کاربرد دارد. برای تمامی‌آیتم‌های موجود در لیست باید از تگ آیتم لیست ( < li >) استفاده کنید. برای مثال:
< ol >
< li >First thing
< / li >
< li >Second thing
< / li >
< li >Third thing
< / li >
< / ol >
نتیجه:
- First thing
- Second thing
- Third thing
در HTML5 می‌توانید از
< ol reversed >برای معکوس کردن ترتیب شماره‌ها استفاده کنید. با استفاده از یک صفت خاص هم می‌توان شماره آغازین را به صورت دلخواه تعیین کنید.
صفت type نوع نماد ایتم‌های لیست را برای مرورگر مشخص می‌کند و می‌تواند شماره، حرف یا نمادی دیگر باشد، برای مثال:
< ol type= "A" >
۱۵. < ul >
این تگ به لیست نامرتب مربوط می‌شود و به مراتب از مورد قبلی ساده تر است؛ در واقع با استفاده از آن در کنار همه موارد تنها یک بولت نمایش داده می‌شود:
< ul >
< li >First item
< / li >
< li >Second item
< / li >
< li >Third item
< / li >
< / ul >
نتیجه:
- First item
- Second item
- Third item
لیست نامرتب هم از صفت type بهره می‌برد اما تنها می‌توان آن را به شکل دیسک، دایره یا مربع تنظیم کرد.
۱۶. < table >
هرچند استفاده از جداول برای فرمت بندی چندین مطلوب نیست اما در موارد زیادی ممکن است برای بخش بندی اطلاعات ناچار به استفاده از سطرها و ستون‌ها باشید. برای ایجاد جدول باید از چند تگ استفاده کنید که در ادامه به آنها اشاره شده است:
< table >
< tbody >
< tr >
< th >1st column
< / th >
< th >2nd column
< / th >
< /tr >
< tr >
< td >Row 1, column 1
< /td >
< td >Row 1, column 2
< /td >
< /tr >
< td >Row 2, column 1
< /td >
< td >Row 2, column 2
< /td >
< / tbody >
< / table >
تگ‌های ٰ
< table >و
< /table >شروع و پایان جدول را تعیین می‌کنند. تگ
< tbody >نیز شامل تمام محتوای جدول است.
هر سطر جدول در یک تگ
< tr >قرار می‌گیرد. هر سلول موجود در یک سطر در یکی از تگ‌های
< th >برای هدر ستون یا تگ‌های
< td >برای داده قرار می‌گیرند. برای هر یک از ستون‌های موجود در هر سطر به یکی از این دو نیاز دارید. نتیجه کد بالا بدین شکل است:
| 1st column | 2nd column |
|---|---|
| Row 1, column 1 | Row 1, column 2 |
| Row 2, column 1 | Row 2, column 2 |
۱۷. < blockquote >
وقتی از یک شخص یا سایت دیگر نقل قول می‌کنید، بهتر است این بخش از متن را از قسمت‌های دیگر متمایز بسازید. برای این کار باید از تگ blockquote استفاده کرده و متن را در آن قرار دهید؛ برای مثال:
< blockquote >The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past. < /blockquote >
با HTML به پیش برانید
با این ۱۷ تگ html قادر به ایجاد یک سایت ساده خواهید بود. کدهای ذکر شده را می‌توانید در یک ادیتور وارد کرده و پس از بارگذاری در مرورگر نتیجه نهایی را مشاهده کنید.
نام کاربری گذرواژه